<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-11-16 08:08:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-28 09:50:24
 * @FilePath: Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header" v-if="(Number(innerWidth) / Number(innerHeight)).toFixed(3) <= 1.778">
      <div class="main-flex">
        <div>{{ week }}<span>{{ weatherInfo.conditionDay }}</span><span>{{
          weatherInfo.tempNight }}℃~{{ weatherInfo.tempDay }}℃</span></div>
        <div>{{ dataTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Header',
  data() {
    return {
      TimeStamp: '',
      dataTime: '',
      week: '',
      weatherInfo: {
        conditionDay: '',
        tempDay: '',
        tempNight: '',
      },
      innerHeight: document.documentElement.clientHeight,
      innerWidth: document.documentElement.clientWidth
    }
  },
  // beforeDestroy() {
  //   // 取消监听事件
  //   window.removeEventListener('resize', this.onresize)
  // },
  mounted() {
    this.getWeather()
    this.getTimes()
    // 获取当前日期
    setInterval(() => {
      this.TimeStamp++
      this.dataTime = this.$util.getNowTime(this.TimeStamp)
      this.week = this.$util.weeks(this.TimeStamp)
    }, 1000)
    window.addEventListener('resize', () => {
      setTimeout(async () => {
        this.innerHeight = document.documentElement.clientHeight
        this.innerWidth = document.documentElement.clientWidth
      }, 0)
    })
  },
  methods: {
    async getTimes() {
      const { data: res } = await this.$http.post('/TimeStamp')
      if (res.code !== 1) return this.$message.error(res.msg)
      this.TimeStamp = JSON.parse(res.data.time)
      this.dataTime = this.$util.getNowTime(this.TimeStamp)
      this.week = this.$util.weeks(this.TimeStamp)
    },
    // 获取温度天气
    async getWeather() {
      axios.get('http://api.hlzhjy.com/Api/CenterApi/?mode=forecast15days&force=&cityId=')
        .then(res => {
          let arr = res.data.data.weather
          arr.forEach(item => {
            if (item.predictDate === this.getToday()) {
              this.weatherInfo = item
            }
          });
        })
        .catch(error => {
          this.error = error;
        });
    },
    getToday() {
      const now = new Date();
      return [now.getFullYear(), (now.getMonth() + 1).toString().padStart(2, "0"), now.getDate().toString().padStart(2, "0")].join('-');
    },
  }
}
</script>
<style lang="less" scoped>
.header {
  height: 80px;
  position: relative;
  box-sizing: border-box;
  background: url('../../assets/img/top_title.png') no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  font-family: "DingTalk JinBuTi";

  .main-flex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 60px 0 60px;
    justify-content: space-between;

    span {
      margin-left: 15px;
    }
  }
}
</style>

